[规范] 单元测试规范

单元测试是软件开发过程中不可或缺的一部分，尤其对于 Vue 2 组件来说，它确保了每个组件的功能独立且按预期工作。良好的单元测试规范可以帮助开发者快速定位问题、提高代码质量，并为未来的维护提供保障。以下是编写和组织 Vue 2 组件单元测试的最佳实践和规范。

1.单元测试的目标

• 验证单一功能：专注于测试单个组件或函数的行为，确保其在各种输入条件下都能正确执行。
• 隔离依赖：尽量减少对外部依赖的调用，使用模拟（mocks）、桩（stubs）等技术来隔离被测组件与其他系统的交互。
• 快速反馈：单元测试应该运行迅速，以便于频繁执行，及时发现引入的问题。
• 易于理解和维护：测试代码应当简洁明了，便于其他开发者理解并在此基础上进行扩展。

2.测试工具选择

对于 Vue 2 项目，推荐使用以下工具来编写单元测试：

• Jest：一个快速的 JavaScript 测试框架，支持快照测试、异步代码等特性。
• @vue/test-utils：官方提供的辅助库，用于挂载和操作 Vue 组件实例，便于测试。
• Chai 或 Expect：断言库，提供多种断言方式以适应不同的测试需求。
• Sinon.js：用于创建间谍（spies）、桩（stubs）和模拟对象（mocks），以便更好地控制依赖项的行为。

3.编写单元测试案例

设置环境

确保你有一个适当的测试环境配置。这通常涉及到安装必要的依赖包以及配置 Babel 来编译现代 JavaScript 特性。

npm install --save-dev jest @vue/test-utils vue-jest babel-jest

或者使用 Yarn：

yarn add --dev jest @vue/test-utils vue-jest babel-jest

示例：测试一个简单的按钮组件

假设我们有一个名为 Button.vue 的简单按钮组件，它接受一个 label 属性并触发点击事件。

Button.vue

<template>
  <button @click="$emit('click')">{{ label }}</button>
</template>

<script>
  export default {
    name: "Button",
    props: {
      label: {
        type: String,
        required: true,
      },
    },
  };
</script>

Button.spec.js

import { shallowMount } from "@vue/test-utils";
import Button from "@/components/Button.vue";

describe("Button.vue", () => {
  it("renders correctly with given props", () => {
    const wrapper = shallowMount(Button, {
      propsData: { label: "Click Me" },
    });
    expect(wrapper.text()).toContain("Click Me");
  });

  it("emits a click event when clicked", async () => {
    const wrapper = shallowMount(Button);
    await wrapper.trigger("click");
    expect(wrapper.emitted().click).toBeTruthy();
  });
});

4.单元测试规范要点

1. 描述清晰

每个测试都应该有一个明确的描述，说明测试的目的和预期结果。使用 describe 和 it（或 test）函数来组织测试逻辑。

describe("Button.vue", () => {
  it("renders correctly with given props", () => {
    // 测试逻辑...
  });
});

2. 独立性

每个测试都应该能够在没有其他测试干扰的情况下独立运行。避免共享状态或全局变量，除非它们是测试的一部分。

3. 边界条件

尝试不同的输入值，包括无效或极端的情况，以确保组件能够优雅地处理各种可能的场景。

it("handles empty label prop gracefully", () => {
  const wrapper = shallowMount(Button, {
    propsData: { label: "" },
  });
  expect(wrapper.text()).toBe("");
});

4. 异步逻辑

如果组件涉及异步操作（如 API 请求），请确保你的测试能够正确处理这些情况。你可以使用 await 关键字等待所有异步调用完成后再做断言。

it("fetches data on creation and updates state", async () => {
  const wrapper = shallowMount(MyComponent);
  await wrapper.vm.$nextTick(); // 等待数据加载完成
  expect(wrapper.vm.items.length).toBeGreaterThan(0);
});

5. 模拟依赖

对于外部依赖（如 API 调用或其他服务），使用模拟对象来替代实际实现。这可以加快测试速度，并确保测试不受外部因素影响。

jest.mock("axios");

it("calls the API and sets the result to state", async () => {
  axios.get.mockResolvedValueOnce({ data: ["item1", "item2"] });

  const wrapper = shallowMount(MyComponent);
  await wrapper.vm.fetchData();

  expect(wrapper.vm.items).toEqual(["item1", "item2"]);
});

6. 保持简洁

尽量让测试代码保持简短和直观，避免过度复杂的逻辑。一个好的测试应该是容易理解和维护的。

7. 使用快照测试

对于 UI 组件，考虑使用快照测试来捕捉渲染输出的变化。这对于检测意外的 UI 更改非常有用。

it("matches snapshot", () => {
  const wrapper = shallowMount(Button, {
    propsData: { label: "Click Me" },
  });
  expect(wrapper.html()).toMatchSnapshot();
});

5.自动化与 CI/CD 集成

为了确保每次代码变更后都能自动运行这些测试，你应该将测试命令添加到 CI/CD 流程中。例如，在 GitHub Actions 中，你可以在 .github/workflows/ci.yml 文件中添加类似如下的步骤：

name: CI

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "14"
      - run: npm ci
      - run: npm run test:unit

总结

通过遵循上述单元测试规范，你可以构建出一套健壮且可靠的测试体系，从而增强 Vue 2 应用程序的质量保证能力。记住，好的单元测试不仅仅是找到 bug，更是为未来的开发奠定了坚实的基础。如果你有更多问题或需要进一步的帮助，请随时告诉我！